<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- vue的特点： -->
    <!-- 1.生态系统比较繁荣，有成熟的框架和插件 (火热)-->
    <!-- 高效，使用虚拟dom，更新速度快，优化的dom更新，提高了效率 -->
    <!-- 数据响应式  开发效率高  双向绑定   组件化开发，可以封装一些组件，提高开发效率 -->
    <!-- 项目工程化，增加可读性和维护性 -->
    <div id="app">
        <!-- 插值引用法 -->
        <p>{{title}}</p>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            //el 节点,选择器  vue语法只能在被选中的这个节点内使用
            el: '#app',
            // data 定义响应式变量的地方
            data: {
                title: '我是标题'
            },

            methods: {
                // 定义方法的地方
            }
        })
        // 命令式编程  比如js
        // 声明式编程  vue
    </script>
</body>

</html>